import React from "react";
import styled from "@emotion/styled";
import { Spin, Typography } from "antd";

export const Row = styled.div<{
  gap?:number | boolean
  between ?: boolean,
  marginBottom ?: number
  }>`
    display: flex;
    align-items: center;
    justify-content: ${props => props.between?'space-between':undefined};
    margin-bottom: ${props => props.marginBottom + "rem"};
    > * {
      margin-top: 0 !important;
      margin-bottom: 0 !important;
      margin-right: ${props => typeof props.gap === 'number'?props.gap + 'rem':props.gap?'2rem':undefined};
    }
  `
const Fullpage = styled.div`
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
`

export const FullpageLoading = () => (<Fullpage>
  <Spin size={"large"}></Spin>
</Fullpage>)

export const FullPageErrorFallback = ({error}:{error:Error|null}) => <Fullpage>
  <ErrorBox error={error}/>
  {/* <Typography.Text type={"danger"}>{error?.message}</Typography.Text> */}
</Fullpage>
  
// 类型守卫
const isEror = (value:any):value is Error =>value?.message

export const ErrorBox = ({error}:{error:unknown})=>{
  if(isEror(error)){
    return <Typography.Text type="danger" >{error?.message}</Typography.Text>
  }
  return null
}

export const ScreenContainer = styled.div`
  padding: 3.2rem;
  width: 100%;
  height: 90vh;
  display: flex;
  flex-direction: column;
`